Mise à jour le 01/12/2021
Conserver l'aspect ratio d'un div en CSS

Conserver l'aspect ratio d'un div en CSS


Dans le cas où l'on souhaite qu'un div se comporte comme une image lors du redimensionnement de la page.
Voici le code qui permet de le faire.

En résumé :
- un div container est en position relative ;
- on lui impose un padding top qui gère le ratio ;
- un div à l'intérieur est en position absolue.


📖️️Source : https://www.geeksforgeeks.org/maintain-the-aspect-ratio-of-a-div-with-css/


    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="width=device-width,
            initial-scale=1">
            <style>
                .container {
                    background-color: green;
                    position: relative;
                    width: 100%;
                    padding-top: 56.25%; /* 16:9 Aspect Ratio */
                }
    
                .text {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    text-align: center;
                    font-size: 25px;
                    color: white;
                }
                .example {
                    background: white;
                    color: green;
                    font-weight:bold;
                    font-size: 40px;
                    padding-bottom: 20px;
                }
            </style>
            </head>
        <body>
            <div class="container">
                <div class="text">
                    <div class = "example">GeeksforGeeks</div>
    
    <p>A Computer Science portal for geeks. It
                    contains well written, well thought and well
                    explained computer science and programming
                    articles, quizzes etc. Also it contains several
                    coding questions to practice and develop your
                    skills in programming.</p>
    
                </div>
            </div>
        </body>
    </html>                               


🧙‍♂️️La source est bien plus utile que cette page mais j'en ai tellement bavé que le jour où j'aurais à nouveau ce besoin, je ne souhaite pas que l'URL de la page source de ce code retourne un 404.